<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <!-- 为了把 HTML 代码和 CSS 代码分开，需要在专门的地方集中写 CSS 样式 -->
    <style>
        /* 集中编写 CSS 代码时就必须明确指定样式的作用对象，这就是选择器要解决的问题 */
        /* 选择器第一种：标签选择器 */
        div {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }

        /* 选择器第二种：id 选择器 */
        #div05 {
            background-color: red;
        }

        /* 选择器第三种：class 选择器 */
        .gbColorGreenClass {
            background-color: green;
        }
    </style>
</head>
<body>

    <div>div01</div>
    <div>div02</div>

    <!-- 表现和结构产生了耦合，不利于代码维护，所以规范的做法是把 HTML 和 CSS 代码分开 -->
    <div style="color: blue;">div03</div>

    <!-- 不同标签可以设置相同的 class 值，表示它们属于同一个“类别”，对应类选择器 -->
    <div class="gbColorGreenClass">div04</div>

    <!-- HTML 标签设置 id 值不能重复 -->
    <div id="div05">div05</div>
    <div class="gbColorGreenClass">div06</div>

    <span class="gbColorGreenClass">span01</span>
    <span class="gbColorGreenClass">span02</span>
    <span>span03</span>

</body>
</html>